<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/BlockM.ico') }}"/>
    <title>MiTranscriptome</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='bootstrap/css/bootstrap-responsive.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='bootstrap/css/navbar-fixed-top.css') }}" rel="stylesheet">

    <!-- Selectize stylesheet -->
    <link href="{{ url_for('static', filename='scripts/libs/selectize/css/selectize.bootstrap3.css') }}" rel="stylesheet" data-theme="bootstrap3">

     <!-- data-main attribute tells require.js to load
          scripts/main.js after require.js loads. -->
     <script data-main="{{ url_for('static', filename='scripts/main') }}" src="{{ url_for('static', filename='scripts/libs/require.js') }}"></script>

    </head>
    <body>

    <!-- Fixed horizontal navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>-->
          <a class="glyphicon glyphicon-home" href="/"></a>
        </div>
      
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Help</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </div>
      </div><!--/.container -->
    </div><!--/.navbar -->

    <!-- Fixed vertical navbar -->
    <div class="container bs-docs-container">
      <div class="row">
        <div class="col-md-1" id="fix" >
          <div class="bs-sidebar hidden-print" role="complementary">
            <ul class="nav bs-sidenav">
              <li id="Choose_Study_Btn"><a href="#Choose_Study">Choose Study</a></li>
              <li id="Sample_Set_Btn"><a href="#div-select-sample-sets">Sample Set</a></li>
              <li id="Transcript_Btn"><a href="#div-select-transcripts">Transcript</a></li>
              <li id="Heatmap_Btn"><a href="#Heatmap">Heatmap</a></li>
              <li id="Selections_Btn"><a href="#Selections">Selections</a></li>
          </div>
        </div><!--/Vertical Nav Bar -->

    <!-- Main Component -->
    <div class="container">
      <div class="col-md-11 col-md-offset-1" role="main">

        <div id="Home" class="jumbotron">
          <h1>Welcome to MiTranscriptome!</h1>
          <p>MiTranscriptome is a comprehensive tool that allows researchers to study gene expression across multiple cancer-related sample sets, providing powerful insight into the cancer transcriptome.
          </p>
          <p><a id='btn-get-started' class="btn btn-lg btn-primary" href="#" role="button">Get Started &raquo;</a>
          </p>
        </div><!-- /Home Screen -->

        <div id="Choose_Study" class="toshow jumbotron">
          <h3>Choose a study:</h3>
          <select id="select-study" name="study[]" placeholder="Select a study..."></select>
          <p>
          <a id="btn-select-sample-sets" class="btn btn-lg btn-primary" href="#" role="button">Search by Sample Set &raquo;</a>
          <a id="btn-select-transcripts" class="btn btn-lg btn-primary" href="#" role="button">Search by Transcript &raquo;</a>
          </p>
        </div><!-- /Choose Study -->

        <div id="div-select-sample-sets" class="toshow jumbotron">
          <a id="btn-close-sample-set" type="button" class="close">&times;</a>
          <h3>Select sample sets:</h3>
          <select id="select-sample-sets" name="sample-sets[]" multiple=true placeholder="Select sample sets..."></select>
          <p></p>
        </div><!-- /Search by sample set -->

        <div id="div-select-transcripts" class="toshow jumbotron">
          <a id="btn-close-transcript" type="button" class="close">&times;</a>
          <h3>Search transcripts:</h3>
          <select id="select-transcripts" name="transcripts[]" multiple=true placeholder="Search for transcripts..."></select>
          <p></p>
        </div><!-- /Search by transcript -->

        <div id="Heatmap" class="toshow jumbotron">
          <a id="btn-close-heatmap" type="button" class="close">&times;</a>
          <h1>View Heatmap:</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper ligula ac odio consectetur, luctus tempor quam tempor. Suspendisse blandit lorem augue, vitae placerat turpis vestibulum ac. Suspendisse at urna at elit ornare luctus. Aliquam imperdiet eros nec lorem luctus, id egestas libero rhoncus. Sed tellus felis, convallis vel tincidunt fermentum, vehicula a risus.
          </p>
        </div><!-- /View Heatmap -->

        <div id="Selections" class="toshow jumbotron">
          <a id="btn-close-selections" type="button" class="close">&times;</a>
          <h1>Edit Selections:</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper ligula ac odio consectetur, luctus tempor quam tempor. Suspendisse blandit lorem augue, vitae placerat turpis vestibulum ac. Suspendisse at urna at elit ornare luctus. Aliquam imperdiet eros nec lorem luctus, id egestas libero rhoncus. Sed tellus felis, convallis vel tincidunt fermentum, vehicula a risus.
          </p>
        </div><!-- /Edit Selections -->

      </div><!-- /col-md-10 -->
    </div> <!-- /container -->
    </body>
</html>
